<template>
    <el-card shadow="never">
        <div class="levelMenu">
            <span>等级状态：</span>
            <el-select v-model="value" placeholder="请选择" style="width: 240px; margin-right: 20px;" value-key="value"
                clearable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <span>等级名称：</span>
            <el-input v-model="input" style="width: 240px" placeholder="请输入等级名称" clearable />
            <el-button type="primary" style="margin-left: 10px;" @click="pageData.name = input"
                :clear="pageData.name = ''">查询</el-button>
        </div>
    </el-card>
    <el-card style="margin-top: 15px;" shadow="never">
        <div style="margin-bottom: 15px;">
            <el-button type="primary" @click="openLevelFrom?.openDialogVisible()">添加用户等级</el-button>
        </div>
        <el-table :data="groupData.render" style="width: 100%; "
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#333', padding: '0,10px' }">
            <el-table-column prop="_id" label="ID" width='220px' />
            <el-table-column label="等级图标">
                <template #default="scoped">
                    <img :src="scoped.row.icon" height="36px">
                </template>
            </el-table-column>
            <el-table-column prop="levelBg" label="等级背景图">
                <template #default="scoped">
                    <img :src="scoped.row.bg_image" style="width: 36px; height: 36px;">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="等级名称" />
            <el-table-column prop="grade" label="等级" />
            <el-table-column prop="discount" label="享受折扣" />
            <el-table-column prop="exp" label="经验值要求" />
            <el-table-column label="是否显示">
                <template #default="scoped">
                    <el-switch v-model="scoped.row.is_show" :active-value="1" :inactive-value="0"
                        @change="updateUserLevel(scoped.row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scoped">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            更多
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    @click="openLevelFrom?.openDialogVisible(scoped.row._id)">编辑等级</el-dropdown-item>
                                <el-dropdown-item @click="onDeleteBtn(scoped.row._id)">删除等级</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total=groupData.total />
        </div>
        <LevelFrom @getUserLevel="getUserLevel" ref="openLevelFrom"></LevelFrom>
    </el-card>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { deleteUserLevelApi, getUserLevelApi, updateUserLevelApi } from '@/api/userLevel';
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import LevelFrom from './LevelFrom.vue';
type Option = {
    id: number
    value: string
    label: string
}
const value = ref<Option>()
const input = ref('')
const options = [
    {
        id: 1,
        value: '1',
        label: '显示',
    },
    {
        id: 2,
        value: '0',
        label: '不显示',
    },
];
const groupData = ref({ render: [], total: 0 })
const pageData = ref({
    currentPage: 1,
    pageSize: 10,
    is_show: value,
    name: '',
});
const openLevelFrom = useTemplateRef<any>('openLevelFrom');



watch(pageData.value, () => {
    getUserLevel();
}, { deep: true })



onMounted(() => {
    getUserLevel();
})

const onDeleteBtn = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除分组吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteUserLevel(id);
        getUserLevel();
    })
        .catch(() => {

        })
}


//删除
function deleteUserLevel(data: any) {
    deleteUserLevelApi({ _id: data }).then((res) => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        } else {
            ElMessage.error(res.message);
        }
    })
}



//获取
async function getUserLevel() {
    const res: any = await getUserLevelApi({ ...pageData.value });
    if (res.code == 200) {
        groupData.value = { render: res.data.rows, total: res.data.total };

    }
}

//修改
async function updateUserLevel(data: any) {
    const res = await updateUserLevelApi(data);
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '显示状态修改成功',
        })
    } else {
        ElMessage.error(res.message);
    }
    getUserLevel();
}
</script>

<style scoped>
.levelMenu>span {
    margin-right: 6px;
    width: 80px;
    text-align: end;
    font-size: 12px;
}

.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>